<template>
  <div id="Safe">
    <div class="middle">
      <div class="top">
        <ChevronLeftIcon @click="back()" class="back" />
        <div>账号与安全</div>
        <span>&nbsp;</span>
      </div>
      <div class="box">
        <li @click="goChangephone()">
          <div>手机号</div>
          <span>{{ phone }} <ChevronRightIcon /></span>
        </li>
      </div>
      <p>第三方账号</p>
      <div class="box">
        <li>
          <div>微信</div>
          <el-switch v-model="value1" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>QQ</div>
          <el-switch v-model="value2" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>新浪微博</div>
          <el-switch v-model="value3" style="--el-switch-on-color: #ff9900" />
        </li>
      </div>
      <p>高级设置</p>
      <div class="box">
        <li>
          <div>注销账号</div>
          <span
            ><span style="color: #cccccc">注销不可逆，请谨慎操作</span>
            <ChevronRightIcon
          /></span>
        </li>
      </div>
    </div>
  </div>
</template>
    
  <script setup lang="ts">
import "./Safe.css";
import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-vue-next";
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";

let value1 = ref(true);
let value2 = ref(true);
let value3 = ref(true);
let phone = ref(JSON.parse(localStorage.getItem("user")).username || "15673259908");

let router = useRouter();
let back = () => {
  router.go(-1);
};
let goChangephone = () => {
  router.push("/changephone");
};

onBeforeMount(() => {
  phone.value=JSON.parse(localStorage.getItem("user")).username
})
</script>
    
  <style>
</style>